@import './variable.scss';

/*根据dpr计算font-size*/
@mixin font_dpr($font-size) {
  font-size: $font-size;
  [data-dpr='2'] & {
    font-size: $font-size * 2;
  }
  [data-dpr='3'] & {
    font-size: $font-size * 3;
  }
}

/*通过该函数设置字体大小，后期方便统一管理；*/
@mixin font_size($size) {
  @include font_dpr($size);
}

// 不换行
@mixin no-wrap() {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

// 限制行数
@mixin clamp($row) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $row;
}

// 背景颜色
@mixin bg_color() {
  background: $background-color-theme;
  [data-theme='theme1'] & {
    background: $background-color-theme1;
  }
  [data-theme='theme2'] & {
    background: $background-color-theme2;
  }
}

// 背景 Logo 图片
@mixin bg_img($url) {
  [data-theme='theme'] & {
    background-image: url($url+'_163.png');
  }
  [data-theme='theme1'] & {
    background-image: url($url+'_qq.png');
  }
  [data-theme='theme2'] & {
    background-image: url($url+'_it666.png');
  }
  background-size: cover;
  background-repeat: no-repeat;
  // 根据不同屏幕上像素比显示不同图片，防止模糊
  [data-theme='theme'][data-dpr='2'] & {
    background-image: url($url+'_163@2x.png');
  }
  [data-theme='theme'][data-dpr='3'] & {
    background-image: url($url+'_163@3x.png');
  }
  [data-theme='theme1'][data-dpr='2'] & {
    background-image: url($url+'_qq@2x.png');
  }
  [data-theme='theme1'][data-dpr='3'] & {
    background-image: url($url+'_qq@3x.png');
  }
  [data-theme='theme2'][data-dpr='2'] & {
    background-image: url($url+'_it666@2x.png');
  }
  [data-theme='theme2'][data-dpr='3'] & {
    background-image: url($url+'_it666@3x.png');
  }
}

// 次要背景颜色
@mixin bg_sub_color() {
  background: $background-color-sub-theme;
  [data-theme='theme1'] & {
    background: $background-color-sub-theme1;
  }
  [data-theme='theme2'] & {
    background: $background-color-sub-theme2;
  }
}

// 默认字体颜色
@mixin font_color() {
  color: $font-color-theme;
  [data-theme='theme1'] & {
    color: $font-color-theme1;
  }
  [data-theme='theme2'] & {
    color: $font-color-theme2;
  }
}

//  激活字体颜色
@mixin font_active_color() {
  color: $font-active-color-theme;
  [data-theme='theme1'] & {
    color: $font-active-color-theme1;
  }
  [data-theme='theme2'] & {
    color: $font-active-color-theme2;
  }
}

// 边框颜色
@mixin border_color() {
  border-color: $border-color-theme;
  [data-theme='theme1'] & {
    border-color: $border-color-theme1;
  }
  [data-theme='theme2'] & {
    border-color: $border-color-theme2;
  }
}
